<template>
  <div class="leagueinfo2_container">
    <!-- 创建联赛集体信息填写栏 -->
    <van-popup v-model="show1" :style="{ height: '40%' ,width:'80%'}">
      <van-picker
        title="标题"
        show-toolbar
        :columns="columns1"
        @confirm="onConfirm1"
        @cancel="onCancel1"
        @change="onChange1"
      />
    </van-popup>
    <van-popup v-model="show2" :style="{ height: '40%' ,width:'80%'}">
      <van-picker
        title="标题"
        show-toolbar
        :columns="columns2"
        @confirm="onConfirm2"
        @cancel="onCancel2"
        @change="onChange2"
      />
    </van-popup>
    <van-popup v-model="show3" :style="{ height: '40%' ,width:'80%'}">
      <van-picker
        title="标题"
        show-toolbar
        :columns="columns3"
        @confirm="onConfirm3"
        @cancel="onCancel3"
        @change="onChange3"
      />
    </van-popup>
    <van-popup v-model="show4" :style="{ height: '40%' ,width:'80%'}">
      <van-picker
        title="标题"
        show-toolbar
        :columns="columns4"
        @confirm="onConfirm4"
        @cancel="onCancel4"
        @change="onChange4"
      />
    </van-popup>
    <van-popup v-model="show5" :style="{ height: '40%' ,width:'80%'}">
      <van-picker
        title="标题"
        show-toolbar
        :columns="columns5"
        @confirm="onConfirm5"
        @cancel="onCancel5"
        @change="onChange5"
      />
    </van-popup>

    <div>
      <van-cell-group>
        <van-cell title="主办方类型" is-link placeholder="请输入主办方类型" :value="this.CreateLeague_obj.data[0].SponsorType" @click="show1 = !show1"/>
        <van-cell title="参赛人员年龄段" is-link placeholder="请输入参赛人员年龄段" :value="this.CreateLeague_obj.data[0].playerAge" @click="show2 = !show2"/>
        <van-cell title="参赛人员性别" is-link placeholder="请输入参赛人员性别" :value="this.CreateLeague_obj.data[0].playerSex" @click="show3 = !show3"/>
        <van-cell title="比赛赛制" is-link placeholder="请输入比赛赛制" :value="this.CreateLeague_obj.data[0].CompetitionSystem" @click="show4 = !show4"/>
        <van-cell title="比赛规模" is-link placeholder="请输入比赛规模" :value="this.CreateLeague_obj.data[0].CompetitionScale" @click="show5 = !show5"/>
      </van-cell-group>
    </div>
    <div>
      <button id="ok_box" @click="send">该页面填写完成</button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'leagueInfo2',
  data() {
    return {
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      columns1: ['小学', '中学', '大学', '企业', '民间', '官方', '机构', '俱乐部'],
      columns2: ['幼儿(0-6岁)', '青少年(7-17岁)', '成人(18-40岁)', '中老年(41以上)'],
      columns3: ['男', '女', '混合'],
      columns4: ['5人制', '4人制', '3人制', '单挑赛'],
      columns5: ['全国赛', '省级', '市级', '区县级', '村镇级']

    }
  },
  computed: {
    ...mapState(['CreateLeague_obj'])
  },
  methods: {
    onConfirm1(value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
      this.CreateLeague_obj.data[0].SponsorType = value

      this.show1 = false
    },
    onChange1(picker, value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel1() {
      this.$toast('取消')
      this.show1 = false
    },
    onConfirm2(value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
      this.CreateLeague_obj.data[0].playerAge = value
      this.show2 = false
    },
    onChange2(picker, value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel2() {
      // this.$toast('取消')
      this.show2 = false
    },
    onConfirm3(value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
      this.CreateLeague_obj.data[0].playerSex = value
      this.show3 = false
    },
    onChange3(picker, value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel3() {
      // this.$toast('取消')
      this.show3 = false
    },
    onConfirm4(value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
      this.CreateLeague_obj.data[0].CompetitionSystem = value
      this.show4 = false
    },
    onChange4(picker, value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel4() {
      // this.$toast('取消')
      this.show4 = false
    },
    onConfirm5(value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
      this.CreateLeague_obj.data[0].CompetitionScale = value
      this.show5 = false
    },
    onChange5(picker, value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel5() {
      // this.$toast('取消')
      this.show5 = false
    },
    // 将填写好的信息保存到 vuex 中
    send() {
      console.log('第er个该页面填写成功+', this.CreateLeague_obj)
    }
  }
}
</script>

<style scoped>
.leagueinfo1_container{
  height: 150vw;
  /* background-color: antiquewhite; */
  position: relative;
}
 ::v-deep .van-ellipsis{
  color: rgb(0, 0, 0) !important;
}
#ok_box{
  position: absolute;
  width: 90%;
  left: 50%;
  top: 130vw;
  transform: translateX(-50%);
  height: 12vw;
  background-color: rgba(248, 107, 25, 0.973);
  border: none;
  border-radius: 2vw;
}
</style>
